<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('投产统计')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="newlotsta">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>开始时间：</label>
                                <input type="text" class="input-sm" id="startDate" name="startDate" required/>
                            </li>
                            <li>
                                <label>结束时间：</label>
                                <input type="text" class="input-sm" id="endDate" name="endDate" required/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="report:newlotstatistics:export" >
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>
            <div class="col-sm-12 select-table table-bordered">
                <table id="bootstrap-table" data-resizable="true"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-table-resizable-js" />
    <script th:inline="javascript">

        const prefix = ctx + "report/newlotstatistics";
        var column = [
            {
                field: 'NO.',
                title: "序号",
                formatter: function (value, row, index) {
                    return $.table.serialNumber(index);
                }
            },
            {
                field: 'partType',
                title: '产品类型'
            },
            {
                field: 'partId',
                title: '产品名称',
                formatter: function(value, row, index) {
                    return '<a class="" onclick="sumNumClick(\'' + row.partId + '\')">' + row.partId + '</a>';
                }
            },
            {
                field: 'waferQty',
                title: '产品数量',
                footerFormatter:function (value) {
                    // 统计总片数
                    var sumQty = 0;
                    for (var i in value) {
                        sumQty += parseFloat(value[i].waferQty);
                    }
                    return "总片数：" + '<a class="" onclick="sumNumClick()">' + sumQty + '</a>';
                }
            }
        ];

        var options = {
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            showFooter: true,
            footerStyle: footerStyle,
            modalName: "投片统计",
            columns: column
        };

        var tableinit = [[${tableinit}]];

        // 查询初始化
        function query() {
            if ($.validate.form()) {
                if (tableinit) {
                    $.table.init(options);
                    tableinit = false;
                }else {
                    $.table.search();
                }
            }else {
                $.modal.alertWarning("请正确输入时间!");
            }
        }

        // 重置
        function reset() {
            $.form.reset();
        }

        function sumNumClick(partId) {
            let startDate = $("#startDate").val();
            let endDate = $("#endDate").val();
            var url = prefix + "/partdetail?startDate=" + startDate + "&endDate=" + endDate;
            if ($.common.isNotEmpty(partId)) {
                url += "&partId="+partId;
            }
            var options = {
                title: '产品投产详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height() - 50
            };
            $.modal.openOptions(options);
        }

        $(function () {
            var now = new Date().toString();
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                var startDate = laydate.render({
                    elem: '#startDate',
                    type: 'datetime',
                    min: '2010-01-01 00:00:00',
                    max: now,
                    format: 'yyyy-MM-dd HH:mm'
                    ,done: function(value, date){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
                        if (value != null && value != '') {
                            var valuetemp = new Date(value);
                            endDate.config.min.year = valuetemp.getFullYear();
                            endDate.config.min.month = valuetemp.getMonth();
                            endDate.config.min.date = valuetemp.getDate();
                            endDate.config.min.hours = valuetemp.getHours();
                            endDate.config.min.minutes = valuetemp.getMinutes();
                            endDate.config.min.seconds = valuetemp.getSeconds();
                            // 设置两者时间不超过30天
                            valuetemp.setMonth(valuetemp.getMonth() + 1);
                            endDate.config.max.year = valuetemp.getFullYear();
                            endDate.config.max.month = valuetemp.getMonth();
                            endDate.config.max.date = valuetemp.getDate();
                            endDate.config.max.hours = valuetemp.getHours();
                            endDate.config.max.minutes = valuetemp.getMinutes();
                            endDate.config.max.seconds = valuetemp.getSeconds();
                        }
                    }
                });
                var endDate = laydate.render({
                    elem: '#endDate',
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm'
                    ,done: function(value, date){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
                        console.log(value); //得到日期生成的值，如：2017-08-18
                        if (value != null && value != '') {
                            var valuetemp = new Date(value);
                            startDate.config.max.year = valuetemp.getFullYear();
                            startDate.config.max.month = valuetemp.getMonth();
                            startDate.config.max.date = valuetemp.getDate();
                            startDate.config.max.hours = valuetemp.getHours();
                            startDate.config.max.minutes = valuetemp.getMinutes();
                            startDate.config.max.seconds = valuetemp.getSeconds();
                            // 设置两者时间不超过30天
                            valuetemp.setMonth(valuetemp.getMonth() - 1);
                            startDate.config.min.year = valuetemp.getFullYear();
                            startDate.config.min.month = valuetemp.getMonth();
                            startDate.config.min.date = valuetemp.getDate();
                            startDate.config.min.hours = valuetemp.getHours();
                            startDate.config.min.minutes = valuetemp.getMinutes();
                            startDate.config.min.seconds = valuetemp.getSeconds();
                        }
                    }
                });
            });

            $("#newlotsta").validate({
                rules: {
                    startDate: "required",
                    endDate: "required"
                }
            });
        });

        function footerStyle(column) {
            return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
                waferQty: {
                    css: { color: 'red', 'font-weight': 'normal' }
                }
            }[column.field]
        }
    </script>
</body>
</html>